<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>e路有你</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">		
		<link rel="stylesheet" href="css/base.css" type="text/css" />
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<link rel="stylesheet" type="text/css" href="css/swiper-3.3.1.min.css"/>
		<script src="js/jquery-1.8.2.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/swiper-3.3.1.jquery.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="swiper-container main_box">
			<div class="main swiper-wrapper" id="main">
				<!-- page1 -->
				<section class="page1 swiper-slide">
					<div class="resize">
						<div class="logo">
							<img src="img/logo.png"/>
						</div>
						<h2 class="title">我的e周年账单</h2>
						<div class="con">
							<p><i>2015</i>年<i>3</i>月<i>15</i>日<br />我，e城e家初到河北省廊坊市<br />转眼近一年的时间<br />在这里<br />我与<i>400000人</i>成为了好朋友</p>
						</div>
						<div class="ecej_logo mt"></div>
					</div>
				</section>
					<!-- page2 -->
				<section class="page2 swiper-slide">
					<div class="resize">
						<div class="icon">
							<img src="img/hands.png"/>
						</div>
						<div class="dis">
							<p>您是我的第<i>56</i>位朋友</p>
							<p>记得吗？我们相识在这一天</p>
							<p><i>2015年5月23日</i></p>
						</div>
						<div class="user_earth">
							<div class="user_dis">
								<p><i>2015年5月30日</i></p>
								<p>第一次使用e城e家</p>
								<p>消费&nbsp;&nbsp;<i>168.5元</i></p>
								<p>赚得&nbsp;&nbsp;<i>15.08元</i></p>
							</div>
							<div class="earth"></div>
							<p class="usertl">这小小的<i>15.08</i>元，虽然不多，<br />但却成为了我们的开始。</p>
						</div>
						<div class="rocket"></div>
					</div>
				</section>
				<!-- page3 -->
				<section class="page3 swiper-slide">
					<div class="resize">
						<div class="icon"><img src="img/time_icon.png"/></div>
						<div class="p_dis">
							<p>我们一起的<i>364天</i>里</p>
							<p>我默默的记录着您的每次消费，共计</p>
							<p><i>3640.03元</i></p>
						</div>
						<canvas id="p3can" width="320" height="700"></canvas>
						<div class="miniearth"></div>
					</div>				
				</section>
				<!-- page4 -->
				<section class="page4 swiper-slide">
					<div class="resize">
						<div class="icon"><img src="img/pig_icon.png" alt="" /></div>
						<div class="p_dis">
							<p>有我在，不允许别人说您“败家”</p>
							<p>迄今为止，我们一起小赚了</p>
							<p><i>12,220.75 元</i></p>
						</div>
						<div class="galaxy">							
							<div class="track1">
								<div class="track_in">
									<div class="in in1">
										<div class="line">
											<div class="inner">
												<p>蛋糕饮品</p>
												<p>23%</p>
											</div>
										</div>								
									</div>
									<div class="in in2">
										<div class="line">
											<div class="inner">
												<p>休闲娱乐</p>
												<p>17%</p>
											</div>
										</div>								
									</div>
									<div class="in in3">
										<div class="line">
											<div class="inner">
												<p>超市零售</p>
												<p>8%</p>
											</div>
										</div>								
									</div>
									<div class="in in4">
										<div class="line">
											<div class="inner">
												<p>医药健康</p>
												<p>2%</p>
											</div>
										</div>								
									</div>
								</div>					
							</div>
							<div class="track2">
								<div class="track_in">
									<div class="in in1">
										<div class="line">
											<div class="inner">
												<p>油气站</p>
												<p>7%</p>
											</div>
										</div>	
									</div>
									<div class="in in2">
										<div class="line">
											<div class="inner">
												<p>餐饮美食</p>
												<p>38%</p>
											</div>
										</div>	
									</div>
								</div>
							</div>
							<div class="track3">
								<div class="track_in">
									<div class="in in1">
										<div class="line">
											<div class="inner">
												<p>其他</p>
												<p>4%</p>
											</div>
										</div>	
									</div>
								</div>
							</div>
							<div class="qiu">
								<img src="img/ecejglo.png"/>
							</div>
						</div>
					</div>
					<div class="bottom"><img src="img/buttom_er.png"/></div>
				</section>
				<!-- page5 -->
				<section class="page5 swiper-slide">
					<div class="resize">
						<p class="p5_tit">生活专家&nbsp;&nbsp;e城e家</p>
						<div class="medal">
							<img src="img/medal_1.png"/>
						</div>
						<p style="width: 72%; text-align: center; font-size: 0.4375rem; color: #03c9e4; line-height: 0.5625rem; margin: 1rem auto 0;">宅米油盐酱醋茶，通通优惠买到家，不服？来战！</p>
						<div class="light_l"></div>
						<div class="light_r"></div>
						<div class="ufo"></div>
						<div class="leastearth"></div>
					</div>
					<div class="bottom"><img src="img/buttom_er_5.png"/></div>
				</section>
					<!-- page6 -->
				<section class="page6 swiper-slide">
					<div class="resize">
						<div class="icon"><img src="img/rocket_icon.png"/></div>
						<div class="p_dis">
							<p>为了“生活专家”这个称号，<br />我要做的更好<br /><i>2016年业务全新升级</i></p>
						</div>
						<div class="p6_sec1">
							<img src="img/p6_sec1.png"/>
						</div>
						<div class="p6_sec2">
							<img src="img/p6_sec2.png"/>
						</div>
						<p class="usertl">从此，让您不再为生活琐事劳心，<br />去好好的享受生活</p>
						<div class="p6earth"></div>
					</div>
				</section>
				<!-- page7 -->
				<section class="page7 swiper-slide">
					<div class="resize">
						<div class="icon"><img src="img/preson_icon.png"/></div>
						<div class="p_dis">
							<p>会有很多城市的人与我们成为朋友<br /><i>成为e家人</i></p>
						</div>
						<div class="map" id="map">
							<div class="mapline"></div>
						</div>
						<p class="usertl">现在的我一天天在改变<br />无论时间怎么变<br />我对你的诚意<br />永远不变</p>
						<div class="p7earth"></div>
					</div>
				</section>
				<!-- page8 -->
				<section class="page8 swiper-slide">				
					<div class="p8bg">
						<div class="p_dis">一年了<br />陪伴是最长情的告白<br />认识您真的很幸运<br />希望我们就这样<br /><i>e路走下去...</i></div>
						<a href="javascript:;" class="active_btn"></a>
						<div class="receiveed"></div>
						<div class="btnbox clearfix">
							<a href="javascript:;">使用优惠券</a>
							<a href="javascript:;" class="share">分享一下</a>
						</div>
						<div class="finger_box">
							<a href="javascript:;" class="finger"></a>
							<p class="finger_tips">长按指纹关注官方订阅号</p>
						</div>
					</div>				
				</section>			
			</div>
			<div class="upicon"></div>
		</div>
		<!--输入手机号-->
		<div class="newuser">
			<div class="logo">
				<img src="img/logo.png"/>
			</div>
			<p class="tips">输入手机号，领取e周年大礼包</p>
			<form>
				<input type="tel" />
				<div class="codes clearfix">
					<input type="number" /><a href="javascript:;">获取验证码</a>
				</div>
				<input type="button" value="立即领取"/>
				<a href="javascript:;" class="share">分享一下</a>
				<div class="ecej_logo mt"></div>
			</form>
		</div>
		<!--弹窗-->

		<!--已抢光与已结束-->
		
		<div class="music">
			<img src="img/music_true.png"/>
		</div>
		<audio src="audio/bg.mp3" id="mp3" autoplay loop></audio>
	</body>
	<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var audio=$('#mp3')[0];		
		var bPlay=false;
		audio.oncanplay=function(){
			if(audio.paused){
				$('.music img').attr('src','img/music_false.png');
				bPlay=true;
			}
		}
		$('.music').on('touchstart',function(){
			if(bPlay){
				audio.play();
				$('.music img').attr('src','img/music_true.png');
				bPlay=false;
			}else{
				audio.pause();
				$('.music img').attr('src','img/music_false.png');
				bPlay=true;
			}
		});
	</script>
</html>
